<script lang="ts" setup>
const showLogin = ref(false)
const showProfile = ref(false)
const showDownload = ref(false)
const router = useRouter()
const { userInfo } = toRefs(useUserStore())
const { sourceCdnUrl } = useRuntimeConfig().public

defineProps({
  showLogo: {
    type: Boolean,
    default: false,
  },
  showBack: {
    type: Boolean,
    default: false,
  },
  showTitle: {
    type: Boolean,
    default: false,
  },
  showNavRight: {
    type: Boolean,
    default: false,
  },
})

async function handleDownload() {
  const loading = showLoadingToast({
    duration: 0,
    message: 'Download...',
  })
  const { Data } = await useRequest.post('/AppByChannel')
  if (Data?.url) {
    const link = document.createElement('a')
    link.href = `${sourceCdnUrl}${Data.url}`
    link.setAttribute('download', Data.filename)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } else {
    showToast('download falied')
  }
  loading.close()
}
</script>

<template>
  <div class="nav-bar">
    <div class="nav-left">
      <div
        v-if="showLogo"
        class="logo"></div>
      <svg-icon
        v-if="showBack"
        class="arrow-left"
        name="arrow-left"
        @click="router.back()">
      </svg-icon>
    </div>

    <h1
      v-if="showTitle"
      class="nav-title">
      Top Up
    </h1>

    <div
      v-if="showNavRight"
      class="nav-right">
      <svg-icon
        name="down"
        class="down-icon"
        @click="handleDownload">
      </svg-icon>

      <div
        v-if="userInfo?.user_id"
        v-lazy:background-image="{
          src: userInfo?.google_user_profile?.picture,
          preLoad: 1.3,
          attempt: 1,
        }"
        class="avator"
        @click="showProfile = !showProfile"></div>

      <svg-icon
        v-else
        class="avator"
        name="avator"
        @click="showLogin = true">
      </svg-icon>
    </div>
  </div>

  <!-- login-popup -->
  <van-popup
    v-model:show="showLogin"
    teleport="body">
    <LazyLoginPopup @close="showLogin = false"></LazyLoginPopup>
  </van-popup>

  <!-- userinfo-popup -->
  <LazyProfilePopup
    v-if="showProfile"
    @close="showProfile = false">
  </LazyProfilePopup>

  <!-- download-popup -->
  <van-popup
    v-model:show="showDownload"
    teleport="body">
    <LazyDownloadPopup> </LazyDownloadPopup>
  </van-popup>
</template>

<style lang="scss" scoped>
@media (min-width: 500px) and (min-height: 640px) {
  .nav-bar {
    height: 70px !important;
  }
}
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding-top: 8px;
  background-color: $bg-color;
  z-index: 99;

  .nav-left {
    position: absolute;
    left: 0;
    top: 0;
    width: 44px;
    height: 100%;
    .logo {
      margin-top: 10px;
      margin-left: 14px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 9px;
      background-color: $primary-color;
      @include bgimg(contain, 'logo.png');
    }
    .arrow-left {
      font-size: 20px;
      margin-top: 8px;
      margin-left: 14px;
    }
  }
  .nav-title {
    @include uniline;
    flex: 1;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    padding: 0 80px 0 80px;
  }
  .nav-right {
    @include flexbox($jc: flex-end, $ai: center);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 80px;
    flex-shrink: 0;
    .down-icon {
      font-size: 24px;
      margin-right: 18px;
      cursor: pointer;
    }
    .avator {
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 24px;
      background-color: $primary-color;
      background-position: center center;
      background-size: contain;
      margin-right: 14px;
      cursor: pointer;
    }
  }
}
</style>
